<template>
  <el-dialog
      :model-value="visible"
      width="60%"
      @close="handleClose"
      class="detail-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <el-icon :size="20"><Document /></el-icon>
        <span>查看签约详情</span>
      </div>
    </template>

    <el-skeleton :rows="10" animated v-if="loading" />

    <el-tabs v-model="activeTab" v-else>
      <el-tab-pane name="summary">
        <template #label>
          <span class="tab-label">
            <el-icon><Tickets /></el-icon> <span>签约概要</span>
          </span>
        </template>
        <el-descriptions :column="4" border class="description-box">
          <el-descriptions-item label="居民姓名" :span="2">{{ details.residentName ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="身份证号" :span="2">
            {{ details.idCard ?? '--' }}
            <el-icon class="copy-icon" @click="copyText(details.idCard)"><CopyDocument /></el-icon>
          </el-descriptions-item>

          <el-descriptions-item label="签约状态" :span="4">
            <el-tag :type="statusInfo.type" disable-transitions>{{ statusInfo.text }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="签约机构" :span="2">{{ details.orgName ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="签约团队" :span="2">{{ details.teamName ?? '--' }}</el-descriptions-item>

          <el-descriptions-item label="服务包" :span="2">{{ details.pakName ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="费用(元)" :span="2">{{ formatFee(details.fee) }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane name="audit">
        <template #label>
          <span class="tab-label">
            <el-icon><Clock /></el-icon> <span>时间与审核</span>
          </span>
        </template>
        <el-descriptions :column="4" border class="description-box">
          <el-descriptions-item label="签约类型" :span="4">{{ details.recordType ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="申请时间" :span="2">{{ formatDate(details.applyTime) }}</el-descriptions-item>
          <el-descriptions-item label="生效日期" :span="2">{{ formatDate(details.effectiveTime) }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer" v-if="!loading">
        <el-button v-if="details.status === 0" type="success" @click="handleRemind">提醒支付</el-button>
        <el-button @click="handleClose">返回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
// 引入需要的图标
import { Document, Tickets, CollectionTag, Clock, CopyDocument } from '@element-plus/icons-vue';

export default {
  name: "RecordDetail",
  // 注册需要用到的组件（主要是图标）
  components: {
    Document,
    Tickets,
    CollectionTag,
    Clock,
    CopyDocument
  },
  // 定义 props
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    details: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  // 声明 emits
  emits: ['update:visible', 'edit', 'remind'],
  // 定义 data
  data() {
    return {
      activeTab: 'summary',
    };
  },
  // 定义计算属性
  computed: {
    statusInfo() {
      switch (this.details.status) {
        case 0: return { text: '待支付', type: 'warning' };
        case 1: return { text: '已生效', type: 'success' };
        case 2: return { text: '已过期', type: 'info' };
        default: return { text: '未知', type: 'danger' };
      }
    }
  },
  // 定义方法
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return '--';
      return dayjs(dateStr).format('YYYY-MM-DD HH:mm');
    },
    formatFee(fee) {
      if (fee === null || fee === undefined) return '--';
      return `¥ ${parseFloat(fee).toFixed(2)}`;
    },
    async copyText(text) {
      if (!text) return;
      try {
        await navigator.clipboard.writeText(text);
        ElMessage.success('已成功复制！');
      } catch (err) {
        ElMessage.error('复制失败');
      }
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleEdit() {
      this.$emit('edit', this.details.recordId);
      this.handleClose();
    },
    handleRemind() {
      this.$emit('remind', this.details.recordId);
    }
  }
}
</script>

<style scoped>
/* 自定义对话框标题 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* Tab 标签样式 */
.tab-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.description-box {
  margin-top: 10px;
}
.tag-container {
  padding: 20px;
  min-height: 120px;
}
.disease-tag {
  margin: 5px;
  font-size: 14px;
}

/* 复制图标样式 */
.copy-icon {
  margin-left: 8px;
  cursor: pointer;
  color: var(--el-color-primary);
}
.copy-icon:hover {
  opacity: 0.8;
}

/* 覆盖 el-dialog 的一些样式，让自定义标题更好看 */
:deep(.el-dialog__header) {
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-right: 0;
}
:deep(.el-dialog__footer) {
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>